<script setup lang='ts'>
import SideView from '@/components/layout/SideView.vue'
import HeaderView from '@/components/layout/HeaderView.vue'
import MainView from '@/components/layout/MainView.vue'
import FooterView from '@/components/layout/FooterView.vue'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const allmenu = sessionStorage.getItem('menu_routers')
const menus = JSON.parse(allmenu)

onMounted(() => {
    menus.map((menu: any) => {
        menu.twomenus.map((tem: any) => {
            router.addRoute('layout', {
                path: tem.url,
                name: tem.name,
                component: () => import('../components/' + tem.component + '.vue')
            })
        })
    })
    setTimeout(() => {
        router.push('/layout/main')
    }, 1)
})
</script>
<template>
    <div class="common-layout">
        <el-container>
            <el-aside width=auto>
                <SideView></SideView>
            </el-aside>
            <el-container>
                <el-header>
                    <HeaderView></HeaderView>
                </el-header>
                <el-main>
                    <MainView></MainView>
                </el-main>
                <el-footer height="20px">
                    <FooterView></FooterView>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<style scoped>
@import url('../assets/layout/layout.css');
</style>